<template>
  <div class="projectInfo">
    <div class="projectInfo-list">
      <div 
        v-for="(item,index) in props.config"
        :key="index"
        :class="['projectInfo-list--item',  props.labelWidth && 'projectInfo-list--width']"
      >
        <span class="projectInfo-list--item-label" :style="{
          'min-width': props.labelWidth + 'rem'
        }">{{ item.label }}</span>
        <span 
          class="projectInfo-list--item-value"
        >{{ (item.formatter && item.formatter(props.formData)) || (props.formData && props.formData[item.prop as string]) || item.value  || '-' }}</span>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed } from "vue";
interface item{
  label: string
  value: string | number
  prop?: string
  formatter?: Function
}

let props = defineProps<{
  config: item[]
  formData?: {
    [key:string]: any
  }
  labelWidth?: number
}>()

let styles = computed(() => ({
  left: props.labelWidth + 'rem',
  width: props.labelWidth + 'rem'
}))
</script>

<style lang="scss" scoped>
  .projectInfo{

    &-list{

      &--item{
        color: $spare17;
        display: flex;
        font-size: 1.4rem;
        position: relative;
        line-height: 3.6rem;

        &-label{
          min-width: 9.14rem
        }
      }

      &--item::after{
        bottom: 0;
        content: '';
        left: 9.14rem;
        position: absolute;
        display: inline-block;
        width: calc(100vw - 9.14rem - 4.8rem);
        border-top: 0.1rem solid $spare18;
      }

      &--width::after{
        left: v-bind('styles.width');
        width: calc(100vw - 4.8rem - v-bind('styles.left'));
      }

    }
  }
</style>
